<template>
    <div class="_pageDetail">
        <div class="_card">
            <div class="_title">产品信息</div>
            <el-form inline :rules="rules" :model="form" label-width="100px" ref="form">
                <el-form-item label="商品名" prop="productName">
                    <el-input v-model="form.productName" placeholder="请输入" :maxlength="64" />
                </el-form-item>
                <el-form-item label="品牌" prop="brandId">
                    <el-select
                      v-model="form.brandId"
                      placeholder="请选择品牌"
                      filterable>
                        <el-option
                            v-for="item in brandList"
                            :key="item.brandId"
                            :label="item.brandName"
                            :value="item.brandId"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="产品类型" prop="type">
                    <el-select
                      v-model="form.type"
                      placeholder="请选择产品类型"
                      filterable>
                        <el-option
                            v-for="dict in dict.type.com_type"
                            :key="+dict.value"
                            :label="dict.label"
                            :value="+dict.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否启用" prop="brandId">
                    <el-select
                        v-model="form.isEnable"
                        placeholder="是否启用"
                        filterable>
                        <el-option
                            v-for="dict in dict.type.sys_yes_no_new"
                            :key="+dict.value"
                            :label="dict.label"
                            :value="+dict.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div class="_card">
            <div class="_title">
                <span>产品规格</span>
                <el-button
                  @click="addSku"
                  type="primary"
                  icon="el-icon-plus"
                  plain
                  size="mini"
                  style="margin-left:10px">新增</el-button>
            </div>
            <el-table
                :data="skuList"
                :cell-style="{ 'text-align': 'center' }"
                :header-cell-style="{ 'text-align': 'center' }"
            >
                <el-table-column label="规格名" prop="name">
                    <template #default="{ row }">
                        <el-input v-model="row.name"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="颜色" prop="color">
                    <template #default="{ row }">
                        <el-input v-model="row.color"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="尺寸" prop="dimensions">
                    <template #default="{ row }">
                        <el-input v-model="row.dimensions"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="当前进货价" prop="currentPrice">
                    <template #default="{ row }">
                        <el-input v-model="row.currentPrice" type="number" v-input-valid:[0].float="{ min: 0 }"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="建议零售价" prop="retailPrice">
                    <template #default="{ row }">
                        <el-input v-model="row.retailPrice" type="number" v-input-valid:[0].float="{ min: 0 }"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="发货地" prop="place">
                    <template #default="{ row }">
                        <el-input v-model="row.place"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="运费" prop="freight">
                    <template #default="{ row }">
                        <el-input v-model="row.freight" type="number" v-input-valid:[0].float="{ min: 0 }"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="利润率" prop="profitMargin">
                    <template #default="{ row }">
                        <el-input v-model="row.profitMargin"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="remark">
                    <template #default="{ row }">
                        <el-input v-model="row.remark" maxlength="255"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" fixed="right" width="100px">
                    <template #default="{ row }">
                        <el-button
                            size="mini"
                            type="text"
                            @click="deleteSku(row)"
                            icon="el-icon-delete"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    <div class="_footer-btn">
        <el-button @click="$tools.clearPageCacheTo('/products/productList', 'close')">取 消</el-button>
        <el-button type="primary" @click="submitForm()" plain>提 交</el-button>
    </div>

    </div>
</template>

<script>
import { listBrandAll } from '@/api/products/brands.js'
import { addProduct, getProduct } from '@/api/products/productList.js'
export default {
    name:'product',
    dicts: ['com_type', 'sys_yes_no_new'],
    components:{},
    props:{},
    data() {
        return {
            form: {
                productName: null,
                brandId: null,
                brandName: null,
                type: null,
                isEnable: 1,
                remark: null,
            },
            skuList: [],
            rules: {
                productName: this.$tools.formRules('$noAir'),
                brandId: this.$tools.formRules('$noAir'),
                type: this.$tools.formRules('$noAir'),
                isEnable: 1,
                remark: null,
            },
            // 品牌列表
            brandList: []
        }
    },
    created() {
        this.getListBrandAll()
        this.$route.query.id && this.getDetail()
    },
    mounted() {},
    activated() {},
    beforeDestroy() {},
    methods: {
        // 获取所有品牌
        getListBrandAll(){
            listBrandAll().then(({ data })=>{
                this.brandList = data
            })
        },
        getDetail(){
            getProduct(this.$route.query.id).then(({ data })=>{
                console.log(data);
                
                this.form = data
            })
        },
        // 新增规格
        addSku(){
            const mId = this.skuList.at(-1)?.mId + 1 || 1
            this.skuList.push({
                name: null,
                color: null,
                dimensions: null,
                currentPrice: 0,
                retailPrice: 0,
                place: null,
                freight: null,
                profitMargin: null,
                remark: null,
                mId,
            })
        },
        deleteSku(row){
            const i = this.skuList.indexOf(row)
            this.skuList.splice(i, 1)
        },
        // 提交表单
        submitForm(){
            this.$refs.form.validate(valid=>{
                if(!valid) return
                addProduct({
                    ...this.form,
                    brandName: '战狼',
                    skus: this.skuList,
                }).then(_=>{
                    this.$message.success('新增成功')
                })
            })
        },
    },
}
</script>

<style lang="scss" scoped>
</style>